(function () {
  class LineLayer extends BaseLayer {
    constructor(config = {}) {
      super(config);
      this.minZoom = 10
      this.maxZoom = 21
      this.name =  'lineLayer'
      this.noneTips = true
      this.initLayer({
        type: 'line',
        'layout': {
          'line-join': ['get', 'lineJoin'],
          'line-cap': ['get', 'lineCap']
        },
        'paint': {
          'line-color': ['get', 'lineColor'],
          'line-width': ['get', 'lineWidth']
        }
      })

    }

    /**
     *
     * @param featrue 当前点击的feature
     * @param data 当前点击的feature data
     * @returns {string}
     */
    setTipHtml(featrue, data) {
      return `
        <div class="self_point_container"> 
            <div class="item">
                <span>名称：</span>
                <span>${data.name}</span>
            </div>
        </div>
      `
    }

    getStyle(item) {
      item = Object.assign({}, item, {
        lineColor: item.lineColor || '#ff0000',
        lineWidth: item.lineWidth || 5,
      })
      return item
    }

    makeFeature(item) {
      item = this.getStyle(item)
      let f = {
        type: 'Feature',
        geometry: {
          type: 'LineString',
          coordinates: item.lineCoor
        },
        properties: {
          lineJoin: 'round',
          lineCap: 'round',
          icon: item.icon,
          ...item,
          data: item,
        }
      }
      return f
    }

    loadData() {
      this.cacheData = [
        {
          lineCoor: [
            [121.48370205699933, 31.231503492530862],
            [121.48458897364605, 31.230307571631073],
            [121.48564645118626, 31.230074219446493]
          ],
          lineWidth: 5,
          lineColor: '#f00',
          name: '线路1 red',
        },
        {
          lineCoor: [
            [121.48564645118626, 31.230074219446493],
            [121.48541173370899, 31.230751261572053],
            [121.48675883640612, 31.231174943859813]
          ],
          lineWidth: 10,
          lineColor: '#000',
          name: '线路2 black',
        },
      ]
      this.refreshLayer()
      this.fitExend()
    }
  }


  window.addEventListener('mapCreatedEvent', ev => {
    new LineLayer({
      name: 'lineLayer'
    })
  })
})();
